<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
    <style>
      body {
        background: white;
      }
      h1 {
        color: white;
      }
      .arrowheadPath {
        fill: red;
      }

      .edgePath .path {
        stroke: red;
      }
    </style>
  </head>
  <body>
    <h1>info below</h1>
    <div style="display: flex; width: 100%; height: 100%">
      <pre id="huge" class="mermaid" style="width: 100%; height: 100%">
        graph LR;
      </pre>
    </div>
    <script type="module">
      const nodes = ('A-->B;B-->A;'.repeat(415) + 'AB;').repeat(57) + 'A-->B;B-->A;'.repeat(275);
      document.getElementById('huge').innerHTML += nodes;

      import mermaid from './mermaid.esm.mjs';
      mermaid.initialize({
        theme: 'dark',
        // arrowMarkerAbsolute: true,
        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
        logLevel: 0,
        flowchart: { curve: 'linear', htmlLabels: false },
        // gantt: { axisFormat: '%m/%d/%Y' },
        sequence: { actorMargin: 50 },
        // sequenceDiagram: { actorMargin: 300 } // deprecated
      });
    </script>
  </body>
</html>
